<template>
  <div class='manager'>
    <el-dialog append-to-body destroy-on-close v-model="groupDialogVisible" title="分组名称" width="500" center>
      <el-form :model="groupNameForm" ref="groupNameFormRef">
        <el-space fill>
          <el-form-item label="分组名称" prop="groupName">
            <el-input v-model="groupNameForm.groupName" placeholder="请输入分组名称" clearable/>
          </el-form-item>
          <el-form-item label="分组排序" prop="orderNum">
            <el-input-number v-model="groupNameForm.orderNum" placeholder="请输入分组排序" clearable/>
            <small style="margin-left: 12px;color: #909399"> 输入1为置顶 </small>
          </el-form-item>
        </el-space>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitGroupDialog()">
            提交
          </el-button>
          <el-button @click="cancelGroupDialog()">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <EditFlowDialog :createApproverType="createApproverType" @idFinish="editFinish" :editId="editId"
                    v-model="editFlowDialogVisible"/>
    <div class="app-container">
      <PageTpl>
        <template #header>
          <el-card shadow="never">
            <div
                style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;width: 100%">
              <div style="flex: 0 0 auto">
                审批管理
              </div>
              <el-divider direction="vertical"/>
              <el-button type="primary" size="small" @click="newGroup" icon="Plus">新建分组</el-button>
              <el-divider direction="vertical"/>
              <el-button type="primary" size="small" @click="newFlow" icon="Plus" :color="approverCard" style="color:white">新建审批</el-button>
              <el-divider direction="vertical"/>
              <el-button type="primary" size="small" @click="refresh" icon="Refresh">刷新</el-button>
              <el-divider direction="vertical"/>
              <el-autocomplete
                  style="width: 400px"
                  @clear="clear"
                  v-model="str"
                  :fetch-suggestions="querySearch"
                  clearable
                  placeholder="流程名称"
                  @select="handleSelect"
              />
            </div>
          </el-card>
        </template>
        <template #body>
          <el-card class="bodyCard" shadow="never" style="margin-top: 12px;" v-loading="loading">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item v-for="(item,index) in flowGroupList" :title="item.groupName" :name="item.groupName">
                <el-table :data="item.approves" v-if="item.approves && item.approves.length>0">
                  <el-table-column prop="flowName" label="类型" width="80">
                    <template #default="scope">
                      <ApproveIconImage :id="scope.row.flowImg"/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="flowName" label="流程">
                    <template #default="scope">
                      {{ scope.row.flowName }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="updateTime" label="更新时间">
                    <template #default="scope">
                      {{ scope.row.updateTime }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="updateBy" label="更新人" width="100">
                    <template #default="scope">
                      {{ scope.row.updateBy }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="revise" label="更新信息" width="350">
                    <template #default="scope">
                      {{ scope.row.revise }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="flowRemark" label="备注">
                    <template #default="scope">
                      {{ scope.row.flowRemark }}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150" fixed="right">
                    <template #default="scope">
                      <el-button @click="edit(scope.row)" type="primary" link size="small" icon="Edit">修改</el-button>
                      <el-divider direction="vertical"/>
                      <el-button @click="send(scope.row)" type="primary" link size="small" icon="Position">发起
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-empty v-else description="暂无流程"></el-empty>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </template>
        <template #footer>
        </template>
      </PageTpl>
    </div>
  </div>
</template>
<script setup name='manager'>
import {approverCard} from "@/assets/styles/variables.module.scss";
import PageTpl from "@/components/EbComponent/PageTpl/PageTpl.vue";
import request from "@/utils/request.js";
import ApproveIconImage from "@/views/flow/createDirectly/basicSetting/ApproveIconImage.vue";
import EditFlowDialog from "@/views/flow/manager/EditFlowDialog.vue";
import {G} from "@/views/flow/globalVar.js";
import {addGroup} from "@/api/flow/group.js";
const {proxy} = getCurrentInstance();
const flowGroupList = ref([])
const loading = ref(true)
const activeNames = ref([])
const cacheFlowGroupList = ref()
const str = ref("")
const editFlowDialogVisible = ref(false)
const editId = ref(undefined)
const createApproverType = ref(G.CREATE_APPROVER_TYPE.CREATE_DIRECTLY);
const groupDialogVisible = ref(false)
const groupNameForm = ref({
  groupName: '',
  orderNum: 1
})
const groupNameFormRef = ref(null)
const newGroup = () => {
  groupDialogVisible.value = true
  if (groupNameFormRef.value) {
    groupNameFormRef.value.resetFields()
  }
}
const submitGroupDialog = () => {
  addGroup(groupNameForm.value)
      .then((res) => {
        groupDialogVisible.value = false
        proxy.$modal.msgSuccess("新增成功");
        getFlowGroupList()
      })
      .catch(() => {
        proxy.$modal.msgError("新增失败");
      })
      .finally(() => {
        groupNameFormRef.value.resetFields()
      })
}
const cancelGroupDialog = () => {
  if (groupNameFormRef.value) {
    groupNameFormRef.value.resetFields()
  }
  groupDialogVisible.value = false
}
const refresh = () => {
  getFlowGroupList()
}
const newFlow = () => {
  createApproverType.value = G.CREATE_APPROVER_TYPE.CREATE_DIRECTLY
  editId.value = undefined
  editFlowDialogVisible.value = true
}
const edit = (row) => {
  createApproverType.value = G.CREATE_APPROVER_TYPE.MODIFY_EXISTING_PROCESS
  editId.value = row.ID
  editFlowDialogVisible.value = true
}
const send = (row) => {
  proxy.$router.push({
    path: "/flow/initiate/" + row.ID
  });
}
const editFinish = () => {
  editFlowDialogVisible.value = false
  editId.value = undefined
  getFlowGroupList()
}
const flowNames = computed({
  get() {
    let result = cacheFlowGroupList.value.map((res) => {
      let result = res.approves.map((res) => {
        return res.flowName
      })
      return result
    })
    let arr = []
    result.forEach((res) => {
      res.forEach((res) => {
        arr.push(res)
      })
    })
    return arr.map((res) => {
      return {
        value: res
      }
    })
  },
  set() {
  },
})
const querySearch = (queryString,
                     cb) => {
  const results = queryString
      ? flowNames.value.filter((res) => {
        return res.value.indexOf(queryString) >= 0
      })
      : flowNames.value
  if (!queryString) {
    clear()
  }
  cb(results)
}
const clear = () => {
  flowGroupList.value = JSON.parse(JSON.stringify(cacheFlowGroupList.value))
}
const handleSelect = (val) => {
  flowGroupList.value = flowGroupList.value.map((res) => {
    res.approves = res.approves.filter((res) => {
      return res.flowName == val.value
    })
    return res
  })
}
const handleChange = (res) => {
}
const getFlowGroupList = () => {
  loading.value = true
  request({
    url: '/flow/group/list',
    method: 'get'
  })
      .then(res => {
        flowGroupList.value = res.rows
        activeNames.value = res.rows.map((res) => {
          return res.groupName
        })
        cacheFlowGroupList.value = JSON.parse(JSON.stringify(flowGroupList.value))
        loading.value = false
      })
}
onMounted(() => {
  getFlowGroupList()
})
</script>
<style scoped lang='scss'>
@import "@/assets/styles/variables.module";

.manager {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;

  .bodyCard {
    min-height: 500px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;

    :deep(.el-card__body) {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      overflow: hidden;

      .el-collapse {
        width: 100%;

        .ApproveIconImage {
          img {
            width: 40px;
            border-radius: 6px;
          }
        }
      }
    }
  }
}
</style>
